<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学员账号分配页面</title>

    <script src="/js/jquery.min.js"></script>
    <script>
        //生成姓名的拼音
        function genpinyin(name){
            if (name.trim() == "") return;

            $.ajax({
                type: "POST",
                url: "/stu/genpinyin",
                data: {
                    name: name
                },
                success: function(data){
                    var pinyin = data.result;
                    if (pinyin != null) {
                        $("[name='username']").val(pinyin);
                    } else {
                        alert("拼音生成失败！");
                    }
                },
                dataType: "json"
            });
        }
    </script>
</head>
<body>
    <h1>分配学员账号</h1>
    <form action="/stu/register" method="post">
        <table>
            <tr>
                <td>学号</td>
                <td><input type="text" name="sno"/></td>
            </tr>
            <tr>
                <td>姓名</td>
                <td><input name="name" onblur="genpinyin(this.value)"/></td>
            </tr>
            <tr>
                <td>账号</td>
                <td><input name="username"/></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input name="password" value="123456"/></td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: center">
                    <button type="submit">分配</button>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>